
<div [formGroup]="loginForm">
	<p><input type="text" formControlName="username"></p>dirty：{{loginForm.controls.username.dirty}}  touched：{{loginForm.controls.username.touched}}
	<p><input type="password" formControlName="password"></p>
	<p><button type="button" class="btn" (click)="login(loginForm)" [disabled]="loginForm.invalid">submit</button></p>
</div>

<p>共享模块中的组件</p>
<app-checkbox [disabled]="false" [checked]="true" (toggle)="toggle($event,123)">eat</app-checkbox>
<app-checkbox [disabled]="true" [checked]="true" (toggle)="toggle($event,123)">sleep</app-checkbox>

<!-- <app-radio-group>
	<app-radio name="sex" [checked]="true">男</app-radio>
	<app-radio name="sex" (select)="radioCheck('女')">女</app-radio>
	<app-radio name="sex">人妖</app-radio>
</app-radio-group> -->

<!-- 分页组件 -->

<app-pagination [total]="total" [page]="page" (pagination)="setPage($event)"></app-pagination>   <button type="button" (click)="setPagination()">改变pagination的输入属性</button>

<div>
	<app-radio name="sex" [checked]="true">男</app-radio>
	<app-radio name="sex" (doCheck)="radioCheck('女')">女</app-radio>
	<app-radio name="sex" (doCheck)="radioCheck('未知')">未知</app-radio>
</div>


<!-- 菜单 -->
<app-tree [data]="treeData" (select)="chooseMenu($event)"></app-tree>


<!-- alert -->
<button type="button" class="btn btn-danger" (click)="pop()">alert</button>

<!-- TABS -->
<div style="padding:10px 10px;"></div>
<app-tabs (tabChange)="tabChange($event,888)">
	<tab title="bootstrap">
		<ng-template tabContent>
			
			<h2>bootstrap</h2>
		</ng-template>
	</tab>
	<tab title="express">
		<ng-template tabContent>
			express
		</ng-template>
	</tab>
	<tab title="redis">
		<ng-template tabContent>
			redis
		</ng-template>
	</tab>
	<tab title="mongoose">
		<ng-template tabContent>
			mongoose
		</ng-template>
	</tab>
</app-tabs>

<!-- 在Template组件中测试动态组件 -->
<app-template></app-template>


<!-- modal框 -->

<button type="button" class="btn btn-primary" (click)="modal(content)">modal</button>

<ng-template #content>
	<p (click)="todo()">{{body}}</p>
	<div>
		<app-tree [data]="treeData" (select)="chooseMenu($event)"></app-tree>
	</div>
	<app-tabs (tabChange)="tabChange($event,888)">
	<tab title="bootstrap">
		<ng-template tabContent>
			
			<h2>bootstrap</h2>
		</ng-template>
	</tab>
	<tab title="express">
		<ng-template tabContent>
			express
		</ng-template>
	</tab>
	<tab title="redis">
		<ng-template tabContent>
			redis
		</ng-template>
	</tab>
	<tab title="mongoose">
		<ng-template tabContent>
			mongoose
		</ng-template>
	</tab>
</app-tabs>
</ng-template>


<!-- datepicker -->

<app-datepicker current="2012-01-18"></app-datepicker>


